<template lang="pug">
//- 
  示例：
  auploader(v-model:urls="data.pic")
view.uploader-box.flex.wrap(:style="`--uploader-img-width:${(boxWidth - margin * 2 - (cols - 1) * gap) / cols}rpx; --uploader-img-gap: ${gap}rpx; --uploader-margin: ${margin}rpx;`")
  view.img.rel(v-for="n,i in urls" :key="i" @click="methods._preview(i)")
    aimg(:src="n")
    view.del.abs(@click.stop="methods._del(i)" v-if="!readOnly"): aimg(:src="ICON.del")
  view.img.flex.center(@click="methods._upload" v-if="urls.length < count && !readOnly")
    aimg.icon(:src="icon")
</template>
<script setup>
import {reactive, onMounted} from 'vue'
//import {home} from '/common/config/url.json'
import {host, ICON} from '/common/config/app.json'
import {__choose2upload} from '/common/script/req.promise'
//import {_tip, _go} from '/common/script/tip'
//import {onLoad} from '@dcloudio/uni-app'

const emits = defineEmits(['update:urls'])
const props = defineProps({
  readOnly: {type: Boolean, default: false},// 只读，无法进行上传删除操作
  urls: {type: Array, default: []},// 必填项
  cols: {type: [Number, String], default: 4},
  margin: {type: [Number, String], default: 0}, // 单位rpx，容器左右间距
  gap: {type: [Number, String], default: 25}, // 单位rpx，图片间距
  count: {type: [Number, String], default: 6}, // 最大上传照片数
  boxWidth: {type: [Number, String], default: 650}, // 单位rpx，容器宽度
  maxSize: {type: [Number, String], default: 0}, // 单位B，图片最大尺寸 1MB = 1048576
  icon: {type: String, default: ICON.plus},
})

const methods = {
  _upload(){
    const count = props.count - props.urls.length
    __choose2upload(count, {maxSize: props.maxSize}).then(urls=>{
      emits('update:urls', props.urls.concat(urls))
    }).catch(err=>{
      _tip(err.msg || '上传失败')
    })
  },
  _preview(i){
    uni.previewImage({
      current: i,
      urls: props.urls.map(url=>(host+url).replace(host+host, host)),
    })
  },
  _del(i){
    const urls = props.urls
    urls.splice(i, 1)
    emits('update:urls', urls)
  },
}


</script>
<style lang="scss" scoped>
@use '/common/scss/mixin.scss' as *;
.uploader-box{
  margin: var(--uploader-margin);
  margin-right: calc(var(--uploader-img-gap) * -1);
  --uploader-img-radius: 10rpx;
  .img{
    margin-right: var(--uploader-img-gap, 25rpx);
    margin-bottom: var(--uploader-img-gap, 25rpx);
    width: var(--uploader-img-width);
    height: var(--uploader-img-width);
    background-color: var(--uploader-img-bgcolor, #eee);
    border-radius: var(--uploader-img-radius);
    --aimg-width: var(--uploader-img-width);
    .icon{
      --aimg-width: var(--uploader-img-icon-width, 45rpx);
    }
  }
  .del{
    // bottom: 0; right: 0;
    // background-color: rgba(255,255,255,.6);
    top: -20rpx; right: -20rpx;
    --aimg-width: 35rpx;
    padding: 10rpx;
    border-top-left-radius: var(--uploader-img-radius);
  }
}
</style>